<template>
  <div>
    <el-card>
      <el-row type="flex" justify="end" style="margin-bottom:10px">
        <el-button type="primary" @click="addPerms('0',1)">添加权限</el-button>
      </el-row>
      <el-table
        height="350px"
        :data="permsList"
        border
        row-key="id"
      >
        <el-table-column
          prop="title"
          label="权限名称"
        />
        <el-table-column
          prop="code"
          label="权限标识"
        />
        <el-table-column
          prop="description"
          label="权限描述"
        />
        <el-table-column label="操作按钮" width="350px">
          <template v-slot="scope">
            <el-button type="primary" size="small" @click="addPerms(scope.row.id,2)">添加子权限</el-button>
            <el-button size="small" @click="editPerms(scope.row.id)">编辑权限</el-button>
            <el-button type="danger" size="small" @click="delPerms(scope.row.id)">删除权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <el-dialog :title="formData.id?'编辑权限':'新增权限'" :visible="isShowDialog" @close="btnCancel">
      <el-form ref="addPerm" label-width="80px" :model="formData">
        <el-form-item label="权限名称">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="formData.code" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        <el-button size="small" @click="btnCancel">取消</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getPermsList, getPermsCount, getPermsById, editPerms, addPerms, delPerms } from '@/api/permission'
import { renderTree } from '@/utils'
export default {
  data() {
    return {
      permsList: [],
      isShowDialog: false,
      pageConfig: {
        _limit: 999,
        _start: 0
      },
      formData: {
        title: '',
        code: '',
        description: '',
        pid: '',
        // 层级
        type: ''
      }
    }
  },
  async created() {
    this.getPermsList()
    this.getPermsCount()
  },
  methods: {
    // 获取权限列表
    async getPermsList() {
      const res = await getPermsList(this.pageConfig)
      const list = res.data
      // 要转变成对象包数组的形式，否则第二层数据无法渲染
      console.log('返回的数据', list)
      this.permsList = renderTree(list, '0')
      console.log('权限列表', this.permsList)
    },
    // 获取权限数量
    async getPermsCount() {
      const res = await getPermsCount()
      this.total = res.data
      console.log(this.total)
    },
    // 添加权限
    addPerms(id, type) {
      console.log(id)
      console.log(type)
      // 根据后台接口要求传入pid为父级的id,type为层级，外面是第一层
      this.isShowDialog = true
      this.formData.pid = id + ''
      this.formData.type = type + ''
    },
    // 编辑权限
    async  editPerms(id) {
      console.log('id', id)
      const res = await getPermsById(id)
      this.formData = res.data
      console.log('编辑数据', res.data)
      // 回显数据
      this.isShowDialog = true
    },
    // 点击确认
    async btnOk() {
      console.log('表单数据', this.formData)
      // 发送请求
      if (this.formData.id) {
        await editPerms(this.formData)
      } else {
        console.log('formData', this.formData)
        await addPerms(this.formData)
      }
      //   提示用户
      this.$message.success('操作成功')
      // 关闭弹窗
      this.isShowDialog = false
      // 刷新页面
      this.getPermsList()
      this.getPermsCount()
    },
    btnCancel() {
      this.formData = {
        title: '',
        code: '',
        description: '',
        pid: '',
        // 层级
        type: ''
      }
      this.isShowDialog = false
    },
    // 删除权限
    async delPerms(id) {
      // 二次弹窗确认
      try {
        await this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        })
        // 发送请求
        await delPerms(id)
        // 提示
        this.$message.success('删除成功')
        // 重新渲染
        this.getPermsCount()
        this.getPermsList()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination{
   text-align: center;
 }
</style>
